<template>
    <div class="product-manage-wrap">
        <el-form ref="searchForm" inline :model="searchParams">
            <el-form-item  prop="search">
                <el-input v-model="searchParams.search"  placeholder="搜索"></el-input>
            </el-form-item>
            <el-form-item  prop="category">
                <el-select v-model="searchParams.category" placeholder="分类"  style="width: 240px">
                    <!-- <el-option v-for="item,index in 10" :key="index" :label="item" :value="item" /></el-select> -->
                    <el-option label="全部" value="" />
                    <el-option v-for="item,index in categoryList" :key="index" :label="item.trim()" :value="item.trim()" />
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="searchHandler">搜索</el-button>
                <el-button type="primary" @click="resetHandler">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table border v-if="productList" :data="productList" height="655" >
            <!-- 渲染死数据 (直接对应属性名) -->
            <!-- <el-table-column label="商品id" prop="proid"></el-table-column> -->
            <el-table-column label="商品名称" prop="proname" width="220"></el-table-column>
            <el-table-column label="分类" prop="category"></el-table-column>
            <el-table-column label="品牌" prop="brand"></el-table-column>

            <!-- 用户根据自己需求渲染数据(作用域插槽)   v-slot="{row,column, $index}"-->
            <el-table-column label="商品图片" prop="img1">
                <template v-slot="{ row }">
                    <el-image class="show-img" preview-teleported style="width: 100px; height: 100px" :src="row.img1"
                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[row.img1, row.img2, row.img3, row.img4]" :initial-index="0" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column label="商品价格" prop="originprice">
                <template v-slot="{ row }">
                    {{ (row.originprice * row.discount / 10).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="brand"></el-table-column>
            <el-table-column label="销量" prop="sales"></el-table-column>
            <el-table-column label="库存" prop="stock"></el-table-column>
            <el-table-column label="开启秒杀"  v-if="judegPermission(['super'])">
                <!-- @change="($event)=>changeIsseckill($event,row)" -->
                <template v-slot="{ row }">
                    <el-switch 
                    v-model="row.isseckill"
                    active-text="on"
                    inactive-text="off" 
                    :active-value="1"
                    :inactive-value="0" 
                    @change="changeIsseckill($event,row.proid)"
                    ></el-switch>
                </template>
            </el-table-column>

            <el-table-column label="开启推荐"  v-if="judegPermission(['super'])">
                <template v-slot="{ row }">
                    <el-switch 
                    v-model="row.isrecommend"
                    active-text="on"
                    inactive-text="off" 
                    :active-value="1"
                    :inactive-value="0" 
                    @change="changeIsrecommend($event,row.proid)"
                    ></el-switch>
                </template>
            </el-table-column>
        </el-table>

        <!-- 
            :page-size="20" 不加v-model 只是父子通信, 子组件内数据改变,不会通知父组件
            v-model:page-size="pageParams.limitNum"  父子通信和子父通信  父传子 子通知父组件改数据

            :default-page-size="10"
            :default-current-page="2"

            v-model:page-size="pageParams.limitNum"
            v-model:current-page="pageParams.count"
         -->
        <!-- <el-pagination 
            v-model:page-size="pageParams.limitNum"
            v-model:current-page="pageParams.count"
            background 
            hide-on-single-page 
            layout="prev, pager,next,total,sizes,jumper" 
            :total="total"
            @change="changeHandler"
            :page-sizes="[5,10,20,50]"
            />
        <span>{{  pageParams}}</span> -->
    </div>
</template>

<script>
import { searchProductListAPI,getProductCategoryAPI,updateIsseckillAPI,updateIsrecommendAPI } from "@/api/product";
import { ElMessage } from "element-plus";

import _ from "lodash";
import mixinPermission from "@/mixins/permission";
// console.dir(_);

export default {
    name: "ProductManageView",
    mixins:[mixinPermission],
    data() {
        return {
            activeIndex: null,
            productList: null,
            // total:null,
            searchParams: {
                category: "", //分类 => 设置为"" 查询所有类别
                search: "",  // 搜索关键词 => 设置为""  查询所有商品
            },
            categoryList:[],
        }
    },
    methods: {
        async searchProductList() {
            try {
                let result = await searchProductListAPI(this.searchParams);
                this.productList = result.data;
                // this.total = result.total;
                console.log("请求成功", result);
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        },
        async getProductCategory() {
            try {
                let result = await getProductCategoryAPI();
                this.categoryList = result.data;
                console.log("分类请求成功", result);
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        },
        searchHandler:_.debounce(function(){
            console.log(1111,this);
            this.searchProductList();
        },300),
        resetHandler:_.debounce(function(){
            this.$refs.searchForm.resetFields();
            this.searchProductList();
        },300),
         changeIsseckill: async function(flag,proid){
            console.log("修改秒杀",flag,proid);
            try {
                let result = await updateIsseckillAPI({proid:proid,flag:flag});
                console.log("请求成功", result);
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        },
        changeIsrecommend: async function(flag,proid){
            console.log("修改推荐",flag,proid);
            try {
                let result = await updateIsrecommendAPI({proid:proid,flag:flag});
                console.log("请求成功", result);
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        }
    },
    mounted() {

        this.getProductCategory();
        this.searchProductList();
    }
}
</script>

<style lang="scss" scoped>
.active {
    z-index: 999;
}

.product-manage-wrap {
    padding: 20px
}
</style>